<template>
  <div id="app">
    <!-- 顶部栏 -->
    <mt-header title="首页">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <!-- 路由组件的出口 -->
    <router-view />

    <!-- 底部栏 -->
    <mt-tabbar v-model="selected">
      <mt-tab-item id="home">
        <img slot="icon" src="./assets/index.png" />
        首页
      </mt-tab-item>
      <mt-tab-item id="shopcart">
        <img slot="icon" src="./assets/shopcart.png" />
        购物车
      </mt-tab-item>
      <!-- <mt-tab-item id="tab3">
        <img slot="icon" src="../assets/100x100.png" />
        tab3
      </mt-tab-item>
      <mt-tab-item id="tab4">
        <img slot="icon" src="../assets/100x100.png" />
        tab4
      </mt-tab-item>-->
    </mt-tabbar>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
  name: "App",
  data() {
    return {
      selected: ""
    };
  },
  watch: {
    selected(newV, oldV) {
      console.log("new:" + newV);
      console.log("old:" + oldV);
      if ("shopcart" == this.selected) {
        Toast('暂无后续逻辑..');
        return
      } else {
        this.$router.push({ name: this.selected });
      }
    }
  }
};
</script>

<style>
</style>
